<template>
  <BasicModal v-bind="$attrs" @register="BomProdListModal" destroyOnClose :maskClosable="false" :defaultFullscreen="true" :title="title" >
    <BasicTable @register="registerBomsTable" :max-height="600" :pagination="false"></BasicTable>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref} from 'vue';
    import {BasicModal, useModal, useModalInner} from '/@/components/Modal';
    import {BasicTable, useTable, TableAction} from '/@/components/Table';
    import {bomListColumns} from '../WmContract.data';
    import { useMessage } from '/@/hooks/web/useMessage';
    import {prodBomList} from '../WmContract.api';

    const { createMessage } = useMessage();
    // Emits声明
    const emit = defineEmits(['register','success']);
    const contract = ref<Recordable>({});
    const productList = ref<Recordable[]>([])


    const [registerBomsTable,{reload}] = useTable({
      dataSource:productList,
      columns: bomListColumns,
      bordered: true,
      useSearchForm: false,
    });

    //表单赋值
    const [BomProdListModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
      setModalProps({confirmLoading: false,showCancelBtn:true,showOkBtn:false});
      contract.value=data.record
      await queryBomMapData(contract.value.id)
    });
    //设置标题
    const title = ref('合同BOM清单')

    async function queryBomMapData(contractId){
      const params = {id:contractId}
      productList.value = await prodBomList(params)
    }

    function handleSuccess(){
      closeModal()
      emit('success')
    }


</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>
